      <template name="skeleton">
        <view class="sk-container">
          <scroll-view refresher-enabled="true" scroll-y="true" class="scroll-view scroll-view">
            <!-- 替换 is 属性写法 -->
            <TreeSwiper />
            <view class="carousel TreeSwiper--carousel">
              <swiper autoplay="false" circular="true" duration="1500" interval="3000" current="0">
                <swiper-item style="position: absolute; width: 100%; height: 100%; transform: translate(0%, 0px) translateZ(0px);">
                  <navigator class="navigator TreeSwiper--navigator" hover-class="none">
                    <image class="image TreeSwiper--image sk-image" mode="aspectFill"></image>
                  </navigator>
                </swiper-item>
              </swiper>
              <view class="indicator TreeSwiper--indicator">
                <text class="dot TreeSwiper--dot active TreeSwiper--active"></text>
                <text class="dot TreeSwiper--dot"></text>
              </view>
            </view>
      
            <!-- 替换 CategoryPanel -->
            <CategoryPanel />
            <view class="category CategoryPanel--category"></view>
      
            <!-- 替换 RecommendGoods -->
            <RecommendGoods class="r r" />
            <view class="caption RecommendGoods--caption">
              <text class="text RecommendGoods--text sk-transparent sk-text-0-0000-673 sk-text sk-pseudo sk-pseudo-circle">热门推荐</text>
            </view>
            <view class="recommend RecommendGoods--recommend">
              <navigator class="recommend-item RecommendGoods--recommend-item">
                <image class="image RecommendGoods--image sk-image" mode="aspectFill"></image>
                <view class="name RecommendGoods--name sk-transparent sk-text-14-2857-992 sk-text">2025年古树普洱生茶饼 云南勐海古树原料，传统工艺压制，茶汤金黄透亮，回甘持久</view>
                <view class="price RecommendGoods--price">
                  <text class="small RecommendGoods--small sk-transparent sk-opacity">¥</text>
                  <text class="sk-transparent sk-text-0-0000-818 sk-text">298</text>
                </view>
              </navigator>
            </view>
            <view class="loading-text RecommendGoods--loading-text sk-transparent sk-text-14-2857-813 sk-text" style="background-position-x: 50%;">没有更多啦~</view>
          </scroll-view>
        </view>
      </template>
      
      <script setup>
      import {TreeSwiper} from "@/components/TreeSwiper.vue"
    </script>
      
      <style lang="scss">
      /* 样式部分保持不变 */
      .sk-transparent {
        color: transparent !important;
      }
      .sk-text-6-2500-58 {
        background-image: linear-gradient(transparent 6.2500%, #EEEEEE 0%, #EEEEEE 93.7500%, transparent 0%) !important;
        background-size: 100% 27.9070rpx;
        position: relative !important;
      }
      .sk-text {
        background-origin: content-box !important;
        background-clip: content-box !important;
        background-color: transparent !important;
        color: transparent !important;
        background-repeat: repeat-y !important;
      }
      .sk-text-14-2857-927 {
        background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
        background-size: 100% 39.0698rpx;
        position: relative !important;
      }
      .sk-text-0-0000-347 {
        background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important;
        background-size: 100% 31.3953rpx;
        position: relative !important;
      }
      .sk-text-14-2857-657 {
        background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
        background-size: 100% 34.1860rpx;
        position: relative !important;
      }
      .sk-opacity {
        opacity: 0 !important;
      }
      .sk-text-0-0000-368 {
        background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important;
        background-size: 100% 24.4186rpx;
        position: relative !important;
      }
      .sk-image {
        background: #EFEFEF !important;
      }
      .sk-pseudo::before,
      .sk-pseudo::after {
        background: #EFEFEF !important;
        background-image: none !important;
        color: transparent !important;
        border-color: transparent !important;
      }
      .sk-pseudo-rect::before,
      .sk-pseudo-rect::after {
        border-radius: 0 !important;
      }
      .sk-pseudo-circle::before,
      .sk-pseudo-circle::after {
        border-radius: 50% !important;
      }
      .sk-container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: transparent;
      }
      </style>